<template>
	<view class="ljapp">
		<view class="dev">
			<view class="header" :style="'background-image: url('+$base.cdn('/uploads/20220408/d588f8212dee57a1deeb2a31b617103e.png')+');'">
				<u-navbar placeholder leftIconColor="#fff" titleStyle ="color:#fff;" title="机构端" :bgColor="'rgba(26,184,255,'+navbarBgAlpha+')'" @leftClick="goto('/pages/my/change')"></u-navbar>
				<view class="outer">
					<view class="userinfo">
						<view class="u-flex">
							<image class="avatar" :src="$base.cdn(businessInfo.avatar)" mode="aspectFill"></image>
							<view>
								<view class="name">{{businessInfo.name}}</view>
								<view class="realname u-flex">
									<view>{{businessInfo.realname}}</view>
									<view style="margin-left: 30rpx;">{{businessInfo.telephone}}</view>
								</view>
								<view class="address u-line-1">{{businessInfo.address}}</view>
							</view>
						</view>
						<image class="setting" src="/pagesB/static/business/icon_scan.png" mode="aspectFill" @click="onScan"></image>
						
						<!-- <image class="scan" src="/pagesB/static/business/icon_scan.png" mode="aspectFill"></image>
						<image class="setting" src="/pagesB/static/business/icon_setting.png" mode="aspectFill"></image> -->
					</view>
					<view class="priceinfo">
						<view class="inner">
							可提现金额
							<text>￥{{businessInfo.money}}</text>
						</view>
					</view>
					<view class="databox">
						<view class="inner u-flex">
							<view class="item">
								<view class="title">注册机构</view>
								<view class="num">{{businessInfo.reg_num}}</view>
							</view>
							<view class="item">
								<view class="title">消费数量</view>
								<view class="num">{{businessInfo.order_num}}</view>
							</view>
							<view class="item">
								<view class="title">消费金额</view>
								<view class="num">{{businessInfo.order_price}}</view>
							</view>
							<view class="item">
								<view class="title">总计佣金</view>
								<view class="num">{{businessInfo.total_commission}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menubox">
				<view class="inner u-flex u-flex-between">
					<navigator hover-class="none" class="item" url="/pagesB/business/withdraw">
						<image src="/pagesB/static/business/icon_money.png" mode="aspectFill"></image>
						<view class="title">提现</view>
					</navigator>
					<navigator hover-class="none" class="item" url="/pagesB/business/withdrawLog">
						<image src="/pagesB/static/business/icon_myorder.png" mode="aspectFill"></image>
						<view class="title">提现记录</view>
					</navigator>
					<navigator hover-class="none" class="item" url="/pagesB/business/invite">
						<image src="/pagesB/static/business/icon_myinformation.png" mode="aspectFill"></image>
						<view class="title">邀请机构</view>
					</navigator>
				</view>
			</view>
			<view class="content">
				<view class="title u-flex">
					<view class="tabs u-flex u-flex-fill">
						<view class="tab" :class="{on:tab==0}" @click="chageTab(0)">邀请机构明细</view>
						<view class="tab" :class="{on:tab==1}" @click="chageTab(1)" style="margin-left: 50rpx;">药品明细</view>
					</view>
					
					<view class="year u-flex" @click="openDate">
						<view class="datenum">{{year}}年</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
					<view class="month u-flex">
						<view class="datenum" @click="openDate">{{month}}月</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
				</view>
				<u-datetime-picker ref="datetimePicker" mode="year-month" :show="showDate" v-model="dateVal" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>

				<block v-if="group.list.length>0">
					<view class="list" v-if="tab==0">
						<view class="card">
							<view class="item" v-for="(item,index) in group.list" :key="index">
								<view class="tit u-flex">
									<view class="u-flex-fill">{{item.name}}</view>
									<view class="time">入驻日期：{{$u.timeFormat(item.createtime,'yyyy.mm.dd')}}</view>
								</view>
								<view class="address">{{formatterAddress(item.address)}}</view>
							</view>
						</view>
					</view>
					<view class="order-list" v-if="tab==1" v-for="(log,index) in group.list" :key="index">
						<view class="outer">
							<view class="head">
								<view class="tit">{{parseInt($u.timeFormat(log.createtime,'m'))}}月</view>
								<view class="con">收入 ￥{{log.total_money}}</view>
							</view>
							
							<view class="item u-flex u-flex-between u-flex-y-center" v-for="(item,idx) in log.list" :key="idx">
								<view class="u-flex">
									<view class="icon">
										<image class="tw" :src="$base.cdn(item.goods_image,'/static/lj/common/group_711.png')" mode="aspectFill"></image>
									</view>
									<view class="u-flex">
										<view>{{item.goods_name}}</view>
										<view class="fxbs" v-if="item.cate==25">分销</view>
									</view>
								</view>
								<view class="money">￥{{item.all_supply_price}}</view>
							</view>
						</view>
					</view>
				</block>

				<view>
					<u-loadmore
						:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
						fontSize="12"
						color="#ccc"
						nomoreText="已加载全部"
						marginTop="28"
						@loadmore="getList"
					></u-loadmore>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navbarBgAlpha: 0,

				showDate: false,
				yearmonth: '',
				dateVal: Number(new Date()),
				year: '',
				month: '',

				businessInfo: {}, //详情
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,
				
				tab: 0,
			}
		},
		onLoad() {
			uni.hideTabBar()
			var myDate = new Date();
			this.year = myDate.getFullYear();
			this.month = myDate.getMonth()+1;
			this.yearmonth = this.year+'-'+this.month;
		},
		onShow(){
			this.$Http({
				url: 'getUserInfo',
				data: {},
				type:'POST',
			}).then(res => {
				if (res.code == 1) {
					this.businessInfo = res.data.business_info
				}
			});
			this.init();
		},
		onReachBottom(){
			this.getList()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onPageScroll: function(e) {
			var a = e.scrollTop/80
			this.navbarBgAlpha = a>1?1:a
		},
		methods: {
			goto(e){
				uni.navigateTo({
					url: e
				})
			},
			formatterAddress(address){
				address = address || ''
				var reg = /.+?(省|市|自治区|自治州|县|区)/g
				var addressTxts = address.match(reg)
				console.log(addressTxts)
				return addressTxts?addressTxts.join('-'):'--'
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			init(){
				this.group.page = 1
				this.group.list = []
				this.group.loaded = false
				this.loading = false

				this.getList()
			},
			chageTab(e){
				if(this.tab == e) return
				
				this.tab = e
				
				this.init();
			},
			getList(){
				var that = this,group = that.group, flagTab = that.tab
				if(that.loading || group.loaded) return;

				that.loading = true

				this.$Http({
					url: that.tab==0?'getBusinessInviteList':'getBusinessInviteOrder',
					data: {
						page: group.page,
						limit: group.limit,
						yearmonth: this.yearmonth,
					},
					type:'POST',
				}).then(res=>{
					if(res.code == 1){
						if(that.tab!=flagTab) return;
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}

					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			changeDate(e){
				console.log(e)
				var myDate = new Date(e.value);
				this.year = myDate.getFullYear();
				this.month = myDate.getMonth()+1;
				this.yearmonth = this.year+'-'+this.month;
				this.showDate = false
				this.init()
			},
			openDate(e){
				this.$refs.datetimePicker.setDate(Number(new Date(this.year+'/'+this.month+'/01').getTime()))
				this.showDate = true
			},
			
			onScan(){
				var that = this
				uni.scanCode({
					success: function (res) {
						const obj = that.$base.getUrlParams(decodeURIComponent(res.result))
						
						if(typeof obj == 'string'){
							console.log(typeof obj)
							
							// that.$Http({
							// 	url: 'businessDetailsPrescription',
							// 	data: {
							// 		verify_code: obj
							// 	},
							// 	show: true
							// }).then(res => {
							// 	if (res.code == 1) {
									that.businessWrite(obj)
							// 	}
							// });
						}else if(typeof obj == 'object'){
							
						}
					}
				});
			},
			businessWrite(verify_code){
				var that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定要核销吗',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'businessWrite',
								show: true,
								data: {
									verify_code: verify_code
								},
								type: 'post',
							}).then(res => {
								if (res.code == 1) {
									uni.showModal({
										confirmText: '确定',
										confirmColor: '#6ccbb6',
										content: res.msg,
										showCancel: false,
									})
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesB/style.less';

	page{background:#f2f2f2;}

	.header{
		position: relative;
		background-color: #fff;
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: cover;

		.outer{
			.userinfo{
				position: relative;
				padding-left: 66rpx;
				padding-right: 40rpx;
				color: #fff;
				font-size: 24rpx;

				.avatar{
					display: block;
					border-radius: 50%;
					background-color: #fff;
					width: 114rpx;
					min-width: 114rpx;
					height: 114rpx;
					margin-right: 16rpx;
				}

				.name{
					font-size: 28rpx;
					margin-left: 4rpx;
					margin-top: 6rpx;
				}
				.realname{
					margin-top: 10rpx;
				}
				.address{
					margin-top: 4rpx;
				}

				.scan{
					display: block;
					position: absolute;
					top: 6rpx;
					right: 110rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 999;
				}
				.setting{
					display: block;
					position: absolute;
					top: 6rpx;
					right: 40rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 999;
				}
			}
			.priceinfo{
				padding: 0 76rpx;
				margin-top: 30rpx;
				.inner{
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 70rpx;
					text-align: center;
					background-color: #55c5ff;
					color: #fff;

					text{margin-left: 20rpx;}
				}
			}
			.databox{
				padding: 0 20rpx;
				margin-top: 20rpx;
				.inner{
					border-radius: 10rpx;
					background-color: #fff;
					color: #333333;
					padding: 30rpx 4rpx;
					box-shadow: 0 4rpx 10rpx #ddd;
				}
				.item{
					width: 25%;
					border-right: 2rpx solid #efefef;
					text-align: center;

					&:last-child{
						border: none;
					}


					.num{
						font-size: 32rpx;
						margin-top: 28rpx;
						font-weight: 500;
					}
				}

			}

		}
	}

	.menubox{
		padding: 38rpx 80rpx;
		background-color: #fff;

		.item{
			font-size: 24rpx;
			color: #333;
			text-align: center;

			image{
				display: block;
				width: 78rpx;
				height: 78rpx;
				margin: 0 auto 6rpx;
			}
		}
	}

	.content{
		margin-top: 34rpx;
		padding-bottom: 20rpx;
		.title{
			padding: 0 40rpx;
			.tabs{
				.on{
					color: #19bdee;
				}
			}
			.year{}
			.month{}

			.datenum{
				color: #333;
				width: 104rpx;
				font-weight: 700;
				text-align: right;
				margin-right: 8rpx;
			}
			/deep/.u-icon__icon{
				transform:scaleY(.86);
			}
		}

		.list{
			padding: 0 20rpx;
			margin-top: 10rpx;
			.card{
				padding: 10rpx 20rpx;
			}
			.item{
				border-bottom: 2rpx solid #f6f6f6;
				padding-top: 28rpx;
				padding-bottom: 30rpx;
				padding-left: 10rpx;
				padding-right: 26rpx;

				&:last-child{
					border-bottom: none;
				}
			}
			.tit{
				font-weight: 700;
			}
			.time{
				font-size: 24rpx;
				color: #555;
				min-width: 248rpx;
			}
			.address{
				font-size: 24rpx;;
				color: #888;
				margin-top: 10rpx;
			}
		}
		.order-list{
			padding: 0 20rpx;
			margin-top: 10rpx;
			
			.outer{
				background-color: #fff;
				border-radius: 10rpx;
				padding-bottom: 16rpx;
				margin-bottom: 20rpx;
			}
		
			.head{
				padding: 20rpx 32rpx;
				border-bottom: 2rpx solid #fafafa;
				line-height: 1.75;
		
				.tit{
					font-size: 30rpx;
				}
				.con{
					font-size: 24rpx;;
					color: #333333;
				}
			}
			.item{
				height: 96rpx;
				padding: 0 32rpx;
				padding-right: 46rpx;
				border-bottom: 2rpx solid #fafafa;
		
				&:last-child{
					border-bottom: none;
				}
		
				.icon{
					width: 78rpx;
					min-width: 78rpx;
					.tw{
						width: 48rpx;
						height: 40rpx;
					}
					.sp{
						width: 50rpx;
						height: 40rpx;
					}
					.report{
						width: 54rpx;
						height: 48rpx;
					}
					.qy{
						width: 50rpx;
						height: 40rpx;
					}
				}
				.money{
					color: #f48e17;
				}
				.fxbs{
					border-radius: 6rpx;
					font-size: 24rpx;
					background-color: #19bdee;
					color: #fff;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
					padding: 0 10rpx;
				}
			}
		
		}
	}

</style>
